<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="/wutoon-trans/static/css/bootstrap/bootstrap.min.css" rel="stylesheet">

    <style>
        .after_content{
            width: 100%;
            height: 100%;
        }
    </style>

    <title>Hello, world!</title>
</head>
<body>

<div class="container">

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/wutoon-trans/index">Home</a></li>
            <li class="breadcrumb-item"><a href="/wutoon-trans/v1/book/index">Book</a></li>
            <li class="breadcrumb-item active" aria-current="page">翻译</li>
        </ol>
    </nav>
    <hr>

    <div class="container">
        <div class="row">
            <div class="col-7" id="origin_content"></div>
            <div class="col-2" id="pre_content"></div>
            <div class="col-3">
                <textarea class="after_content" id="after_content">

                </textarea>
            </div>
        </div>
    </div>


    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
        <div class="btn-group">
            <button type="button" class="btn btn-primary" id="pre_deal">预处理</button>
            <button type="button" class="btn btn-primary" id="save_chapter">保存</button>
            <button type="button" class="btn btn-primary" id="next_chapter">下一章</button>
        </div>

    </nav>

</div>






<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

<!-- 包含 Popper 的 Bootstrap 集成包 -->
<script src="/wutoon-trans/static/js/jquery/jquery-3.6.1.min.js"></script>
<script src="/wutoon-trans/static/js/bootstrap/bootstrap.bundle.min.js"></script>

<script>
    $(function(){
        var urlQuery = getUrlQuery(window.location.href);
        $.ajax({url:"/wutoon-trans/v1/book/"+urlQuery.bookId+"/"+urlQuery.chapterId+"/translate",
            success:function(result){
                $("#origin_content").html(result.data.content);
                $("#pre_content").html(result.data.autoTrans);
                $("#after_content").val(result.data.transContent);
            }
        });
    });

    function getUrlQuery(url) {
        var str = url.substr(url.indexOf('?') + 1);
        var json = new Object();
        const arr = str.split('&')
        for(var i = 0; i < arr.length; i++) {
            var item = arr[i].split('=')
            json[item[0]] = item[1]
        }
        return json
    }

    $("#pre_deal").click(function () {
        var urlQuery = getUrlQuery(window.location.href);
        var param = {content: $("#after_content").val()}
        $.ajax({
            type: "POST",
            url: "/wutoon-trans/v1/book/"+urlQuery.bookId+"/"+urlQuery.chapterId+"/predeal",
            data: JSON.stringify(param),
            contentType:"application/json; charset=UTF-8",
            success: function (result) {
                $("#origin_content").html(result.data.content);
                $("#pre_content").html(result.data.autoTrans);
                $("#after_content").val(result.data.transContent);
            }
        })
    })

    $("#save_chapter").click(function () {
        var urlQuery = getUrlQuery(window.location.href);
        var param = {content: $("#after_content").val()}
        $.ajax({
            type: "POST",
            url: "/wutoon-trans/v1/book/"+urlQuery.bookId+"/"+urlQuery.chapterId+"/saveTransContent",
            data: JSON.stringify(param),
            contentType:"application/json; charset=UTF-8",
            success: function (result) {
                alert("save success")
            }
        })
    })

    $("#next_chapter").click(function () {
        var urlQuery = getUrlQuery(window.location.href);
        var chapterId = urlQuery.chapterId;
        var next = parseInt(chapterId)+ 1
        window.location.href='/wutoon-trans/v1/book/chapter/detail?bookId='+urlQuery.bookId +'&chapterId='+ next
    })
</script>
</body>
</html>
